<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 行程安排 </m-top>

    <m-container :top="glTop">
      <view class="pdv40 mgt32">
        <!--  -->
        <!-- <view class="mine-header flex align-center">
          <u-avatar size="120rpx"></u-avatar>
          <view class="mine-header__content">
            <view class="c333 font36 fw500">大爷</view>
            <view class="c666 font28 mgt20">中科院博士</view>
          </view>

          <image class="mglauto mine-header__edit" src="@/static/icon/call.png"></image>
        </view> -->

        <!--  -->
        <view class="process" v-if="!empty">
          <!-- 到达 -->
          <view class="process-item" v-if="from">
            <trip-item :option="from" :id="tripId"></trip-item>
          </view>

          <view class="process-item" v-if="hotel">
            <trip-item :option="hotel" :id="tripId"></trip-item>
          </view>

          <!-- 离开 -->
          <view class="process-item" v-if="to">
            <trip-item :option="to" :id="tripId"></trip-item>
          </view>
        </view>

        <view class="empty" v-else>
          <m-empty desc="请先添加行程" text="您还没有行程安排"></m-empty>
        </view>
      </view>
    </m-container>

    <m-foot v-if="empty && tripId">
      <view class="pdv40" style="padding-bottom: 40rpx">
        <u-button
          type="primary"
          color="#481EC1"
          text="添加行程"
          @click="
            $u.route({
              url: '/pages-mine/trip/edit',
              params: {
                id: tripId,
              },
            })
          "
          :customStyle="{
            height: '84rpx',
            'border-radius': '20rpx',
            'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
            'font-size': '32rpx',
          }"
        ></u-button>
      </view>
    </m-foot>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import TripItem from "@/pages/mine/components/card-trip-item.vue";
import { getTravelListApi } from "@/api/modules/mine.js";
import dayjs from "dayjs";
export default {
  mixins: [GlTopMixin],
  components: { TripItem },
  data() {
    return {
      empty: true,
      from: {},
      hotel: {},
      to: {},
      tripId: "",
    };
  },

  async onShow() {
    uni.showLoading({
      title: "加载中",
    });
    try {
      const res = await getTravelListApi();
      this.tripId = res.tmi_id || ""; // id标识是否能添加行程
      if (!res.come && !res.hotel && !res.go) {
        uni.hideLoading();
        return;
      }
      this.from = this.formatFrom(res.come);
      this.hotel = this.formatHotel(res.hotel);
      this.to = this.formatTo(res.go);
      this.empty = false;
    } catch (error) {}
    uni.hideLoading();
  },

  methods: {
    formatFrom(item) {
      if (!item) return null;
      const tm = dayjs(item.tmi_come_time_format);
      return {
        title: item.title,
        desc: !!item.tmi_come_if_reception ? "接站" : "不接站" ,
        h1l: tm.format("HH:mm"),
        h1r: `${item.tmi_come_type_name}-${item.tmi_come_number || "无"}`,
        h2r: item.tmi_come_memo || "暂无备注",
        mmdd: tm.format("MM/DD"),
        yyyy: tm.format("YYYY"),
      };

      // ${item.tmi_come_memo || ""} 
    },
    formatTo(item) {
      if (!item) return null;
      const tm = dayjs(item.tmi_go_time_format);
      return {
        title: item.title , 
        desc: !!item.tmi_go_if_reception ? "送站" : "不送站",
        h1l: tm.format("HH:mm"),
        h1r: `${item.tmi_go_type_name}-${item.tmi_go_number}`,
        h2r: item.tmi_go_memo || "暂无备注",
        mmdd: tm.format("MM/DD"),
        yyyy: tm.format("YYYY"),
      };

      // ${item.tmi_go_memo || ""} 
    },
    formatHotel(item) {
      if (!item) return null;
      const tm = dayjs(item.tmi_hotel_star_date_format);
      return {
        title: item.title,
        desc: item.tmh_name,
        h1l: item.tmi_hotel_star_date_format,
        h2l: item.tmi_hotel_end_date_format,
        mmdd: tm.format("MM/DD"),
        yyyy: tm.format("YYYY"),
        isHotel: true,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .trip-item__left {
  margin-right: 60rpx;
  padding-top: 20rpx;
}

/deep/ .trip-item__right {
  padding: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 20rpx;
}

.mine-header {
  padding: 20rpx;

  &__content {
    margin-left: 20rpx;
    flex: 1;
  }

  &__avatar {
  }

  &__edit {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
  }
}

.process {
  margin-top: 20rpx;

  &-item {
    &:not(:first-child) {
      margin-top: 20rpx;
    }
  }
}

.empty {
  margin-top: 300rpx;
}
</style>
